<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户登录</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">
    <h1 style="text-align: center; margin-bottom: 30px;">客户登录</h1>
    <div style="width: 400px;margin-left: 540px;">
        <el-form ref="form" :model="merchant" label-width="80px">
            <el-form-item label="客户名称">
                <el-input v-model="customer.name"></el-input>
            </el-form-item>
            <el-form-item label="客户密码">
                <el-input type="password" v-model="customer.password" show-password></el-input>
            </el-form-item>
            <a style="margin-left: 20px; color: #7fce67; cursor: pointer">忘记密码？？？</a>
            <el-form-item style="margin-top: 20px;">
                <el-button type="success" @click="login">登录</el-button>
                <el-button @click="popRegister()">注册</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!--注册框 start-->
    <div class="add-form">
        <el-dialog title="注册" :visible.sync="dialogFormVisible">
            <el-form ref="dataAddForm" :model="customer" :rules="rules" label-position="right" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户名称" prop="name">
                            <el-input v-model="customer.name"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户密码" prop="password">
                            <el-input v-model="customer.password"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户电话" prop="phone">
                            <el-input v-model="customer.phone"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户地址" prop="address">
                            <el-input v-model="customer.address"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="register()">确定</el-button>
            </div>
        </el-dialog>
    </div>
    <!--注册框 end-->
</div>
</body>

<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            customer: {
                customerId: '',
                name: '',
                password: '',
                phone: '',
                address: '',
            },
            dialogFormVisible: false,   //控制注册表单是否可见
        },
        methods: {
            login() {
                var _this = this;
                axios({
                    method : "post",
                    url: "http://localhost:8080/customer/login",
                    data: _this.customer
                }).then(function (resp) {
                    if (resp.data.code === 20031){
                        localStorage.setItem("username",resp.data.data.name);
                        localStorage.setItem("userId",resp.data.data.customerId);
                        _this.$message.success(resp.data.msg);
                        window.location.href = '/pages/ccommodity.html';
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })
            },
            /*弹出注册框*/
            popRegister(){
                this.dialogFormVisible = true;
                this.resetFrom();   /*每次弹窗都清除表单里的内容*/
            },
            resetFrom(){
                this.customer = {};
            },
            register(){
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/customer/register",
                    data: _this.customer
                }).then(function (resp) {
                    if(resp.data.code === 20011){
                        _this.dialogFormVisible = false;
                        _this.$message.success(resp.data.msg);
                    }else if(resp.data.code === 20010){
                        _this.$message.error(resp.data.msg);
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })
            }
        },
    });
</script>
</html>